<!--
 * 指示器组件
-->
<template>
    <page-layout class="page-layout">
        <!-- 点指示器 -->
        <app-demo-module title="点指示器">
            <pure-swiper :list="list" :current="dotCurrent" autoplay preview @change="handleSwiperChange($event, 'dot')" mode="dot" :static="_static"></pure-swiper>
        </app-demo-module>

        <!-- 条指示器 -->
        <app-demo-module title="条指示器">
            <pure-swiper :list="list" :current="barCurrent" autoplay preview @change="handleSwiperChange($event, 'bar')" mode="bar" :static="_static"></pure-swiper>
        </app-demo-module>

        <!-- 线指示器 -->
        <app-demo-module title="线指示器">
            <pure-swiper :list="list" :current="lineCurrent" autoplay preview @change="handleSwiperChange($event, 'line')" mode="line" :static="_static"></pure-swiper>
        </app-demo-module>

        <!-- 数字指示器 -->
        <app-demo-module title="数字指示器">
            <pure-swiper :list="list" :current="numberCurrent" autoplay preview @change="handleSwiperChange($event, 'number')" mode="number" :static="_static"></pure-swiper>
        </app-demo-module>

        <!-- 下标指示器 -->
        <app-demo-module title="下标指示器">
            <pure-swiper :list="list" :current="indexCurrent" autoplay preview @change="handleSwiperChange($event, 'index')" mode="index" :static="_static"></pure-swiper>
        </app-demo-module>

        <!-- 标题指示器 -->
        <app-demo-module title="标题指示器">
            <pure-swiper :list="list" :current="titleCurrent" autoplay preview @change="handleSwiperChange($event, 'title')" mode="title" :static="_static"></pure-swiper>
        </app-demo-module>

        <!-- 进度条指示器 -->
        <app-demo-module title="进度条指示器">
            <pure-swiper :list="list" :current="progressCurrent" autoplay preview @change="handleSwiperChange($event, 'progress')" mode="progress" :static="_static"></pure-swiper>
        </app-demo-module>

        <!-- 静态布局 -->
        <app-demo-module>
            <pure-button :text="_static ? '关闭静态布局' : '开启静态布局'" @click="_static = !_static" theme="primary" block round></pure-button>
        </app-demo-module>
    </page-layout>
</template>

<script setup>
    import { ref, computed } from "vue";

    // 静态布局
    const _static = ref(false);

    // 数据
    const list = ref([
        { src: "/static/3.png", title: "呼尔将出换美酒" },
        { src: "/static/4.png", title: "与尔同销万古愁" },
        { src: "/static/5.png", title: "但愿人长久，千里共婵娟" },
        { src: "/static/6.png", title: "大鹏一日同风起，扶摇直上九万里" },
        { src: "/static/7.png", title: "十步杀一人，千里不留行" },
        { src: "/static/8.png", title: "仙人抚我顶，结发受长生" },
    ]);
    const dotCurrent = ref(0);
    const barCurrent = ref(0);
    const lineCurrent = ref(0);
    const numberCurrent = ref(0);
    const indexCurrent = ref(0);
    const titleCurrent = ref(0);
    const progressCurrent = ref(0);

    // 切换了
    function handleSwiperChange(event, mode) {
        if (mode == "dot") dotCurrent.value = event.detail.current;
        if (mode == "bar") barCurrent.value = event.detail.current;
        if (mode == "line") lineCurrent.value = event.detail.current;
        if (mode == "number") numberCurrent.value = event.detail.current;
        if (mode == "index") indexCurrent.value = event.detail.current;
        if (mode == "title") titleCurrent.value = event.detail.current;
        if (mode == "progress") progressCurrent.value = event.detail.current;
    }

    // 指示器点击切换事件
    function handleIndicatorChange(index, mode) {
        console.log("指示器点击切换事件", index);
        if (mode == "dot") dotCurrent.value = index;
        if (mode == "bar") barCurrent.value = index;
        if (mode == "line") lineCurrent.value = index;
        if (mode == "number") numberCurrent.value = index;
        if (mode == "index") indexCurrent.value = index;
        if (mode == "title") titleCurrent.value = index;
        if (mode == "progress") progressCurrent.value = index;
    }
</script>

<style scoped lang="scss"></style>
